<template>
	<div id="header">
		<div class="nav-global">
			<div class="container">
				<h1 class="nav-logo">
					<a href="javascript:;"></a>
				</h1>
				<ul class="nav-aside">
					<li class="nav-user" v-show="userShow">
					 <router-link to="/account">个人中心</router-link>
						<!--active-->
						<div class="nav-user-wrapper">
							<div class="nav-user-list">
								<dl class="nav-user-avatar">
									<dd><span class="ng-scope"></span></dd>
									<dt class="ng-binding">{{ userName }}</dt>
								</dl>
								<ul>
									<li class="order"><router-link to="/account" exact>我的订单</router-link></li>
									<li class="address"><router-link to="/address">收货地址</router-link></li>
								<li @click="layout" class="logout"><a href="javascript:;">退出</a></li>
								</ul>
							</div>
						</div>
					</li>
          <router-link to="/login" v-show="show">
            <button style="color: #d0d0d0 ">登录</button>
          </router-link>
					<car-panel class="nav-cart"></car-panel>
				</ul>
				<ul class="nav-list">
          <li><a>在线商城</a></li>
          <li><router-link to="/huawei-p30"><a>华为P30 系列</a></router-link></li>
					<li><router-link to="/mi9-phone"><a>小米9</a></router-link></li>
					<li><router-link to="/apple-phone"><a>Apple iPhone Xs Max</a></router-link></li>
          <li><a href="javascript:;">联系我们</a></li>
				</ul>
			</div>
		</div>
		<div class="nav-sub" style="background-color: #fff">
			<div class="nav-sub-wrapper">
				<div class="container">
					<ul class="nav-list">
            <router-link to="/" exact tag="li" activeClass="active">
              <a>首页</a>
            </router-link>
						<router-link to="/shop" exact tag="li" activeClass="active">
						    <a>官方配件</a>
						</router-link>
					</ul>
          <div class="nav-search">
            <div class="search-bar">
              <form class="search-form">
                <el-popover
                  placement="bottom"
                  width="300"
                  trigger="click"
                  content="">
                <input class="search-box" type="text" slot="reference" placeholder="请输入您需要搜索的商品">
                <div class="popover-content" v-html="html">
                </div>
                </el-popover>
                  <button class="search-button" type="submit"></button>
              </form>
            </div>
          </div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import CarPanel from '@/components/car-panel'
import { delCookie, getCookie } from '../assets/js/cookie';

export default {
  components: {
    CarPanel,
  },
  data() {
    return {
      show: true,
      userName: '',
      userShow: false,
      visible: false,
      html: `<ul class="ul">
                 <router-link to="/huawei-p30"><li><a>华为P30系列</a></li></router-link>
                 <li><router-link to="/register"><a>小米9</a></router-link></li>
                 <li><a>iphone8、iphoneXs</a></li>
                 <li><a>坚果Pro2S</a></li>
                 <li><a>OppoR10</a></li>
</ul>`
    };
  },
  mounted(){
    if(getCookie('userName')){
      this.show = false;
      this.userShow = true;
    }
  },
  methods: {
    layout() {
      if(getCookie('userName')){
        delCookie('userName');
        this.$router.push('/');
        this.$message.success('您已退出成功');
      } else {
        this.$message.error('请您先登录');
        this.$router.push('/login');
      }
      this.show = true;
      this.userShow = false;
    }
  }
};
</script>
<style>
  .search-bar {
    position: relative;
  }
  .nav-search {
    float: right;
  }
  .search-form {
    height: 36px;
    width: 330px;
    padding-left: 40px;
    padding-right: 15px;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 20px;
    box-sizing: border-box;
    background: #fff;
  }
 .search-box {
   width: 100%;
   height: 36px;
   font-size: 14px;
   font-weight: 700;
   color: #333;
   border: none;
   outline: none;
  }
 .search-button {
   position: absolute;
   top: 7px;
   left: 10px;
   height: 20px;
   width: 20px;
   border: none;
   cursor: pointer;
   background-size: contain;
   background-color: transparent;
   background-image: url("../assets/img/icon_search.png");
 }
  .ul li a:hover {
    color: #3e61d7;
    outline: none;
    font-weight: bolder;
  }
  .ul li {
    padding: 5px;
  }
</style>
